main{
    .rightContent{
        height: 100%;
        padding-bottom: 1.875rem;
        .title{
            font-size: 14px;
            margin-top: 2.1875rem;
        }
        .vipHead{
            margin-top: .9375rem;
            padding: 1.25rem;
            .icon{
                text-align: right;
                .iconfont{
                    font-size: 18px;
                }
            }
            .headImg{
                width: 70px;
                height: 70px;
                margin: 10px auto;
                border-radius: 50%;
                overflow: hidden;
                img{
                    width: 100%;
                    height: 100%;
                }
            }
            .userName{
                text-align: center;
                font-weight: bold;
                margin-top: .375rem;
                font-size: 18px;
            }
            .grade{
                text-align: center;
                margin-top: .675rem;
                color: white;
                font-size: 12px;
                span{
                    padding: 0.01rem 0.5rem;
                    background: #ff782f;
                    border-radius: 2px;
                }
            }
        }
        .detailsMain{
            margin-top: .625rem;
            display: flex;
            height: 60%;
            .vipUser{
                width: 24%;
                height: 100%;
                .vipTime{
                    padding: .625rem;
                    text-align: center;
                    font-size: 12px;
                    p{
                        margin-top: .625rem;
                    }
                }
                .vipData{
                    margin-top: .625rem;
                    padding: 10px 10px 15px;
                    li{
                        display: flex;
                        align-items: flex-start;justify-content: space-between;
                        font-size: 14px;
                        padding-top: 10px;
                        span{
                            color: #999999;
                        }
                        p{
                            width: 80%;
                            text-align: right;
                            // line-height: 18px;
                            
                        }
                    }
                }
                .record{
                    margin-top: 0.625rem;
                    padding: 10px;
                    h2{
                        text-align: center;
                        padding: 10px;
                        color: #ff782f;
                    }
                    p{
                        text-indent: 2em;
                        line-height: 18px;
                        font-size: 12px;
                    }
                }
            }
            .vipOrder{
                margin-left: 1%;
                width: 75%;
                
                .order{
                    width: 94%;
                    padding: 1.25rem;
                    h2{
                        font-weight: bold;
                        color: #ff782f;
                    }
                    .tab{
                        width: 100%;
                        margin-top: .9375rem;
                        font-size: 13px;
                        .tabTr{
                            width: 100%;
                            display: flex;
                            align-items: center;
                            padding: 10px 0;
                            .creatTime{
                                width: 22%;
                                padding-left: 1.25rem;
                            }
                            .name{
                                width: 23%;
                            }
                            .count{
                                width: 11%;
                            }
                            .price{
                                width: 10%;
                            }
                            .num{
                                width: 11%;
                            }
                            .money{
                                width: 10%;
                            }
                            .other{
                                i{
                                    color: #48c60a;
                                    margin-right: .3125rem;
                                }
                                span{
                                    color: #aaaaaa;
                                }
                            }
                        }
                        .thead{
                            .tabTr{
                                background: #f4f4f4;
                            }
                        }
                        .tbody{
                            .tabTr:nth-child(even)
                            {
                            background:#f4f4f4;
                            }
                        }
                    }
                }
                .appoint{
                    width: 94%;
                    padding: 1.25rem;
                    margin-top: 0.625rem;
                    margin-bottom: 1.25rem;
                    h2{
                        font-weight: bold;
                        color: #ff782f;
                    }
                    .tab{
                        width: 100%;
                        margin-top: .9375rem;
                        font-size: 13px;
                        .tabTr{
                            width: 100%;
                            display: flex;
                            align-items: center;
                            padding: 10px 0;
                            .creatTime{
                                width: 24%;
                                padding-left: 1.25rem;
                            }
                            .name{
                                width: 26%;
                            }
                            .count{
                                width: 14%;
                            }
                            .static{
                                width: 14%;
                            }
                            // .useTime{
                            //     width: 11%;
                            // }
                            
                        }
                        .tabTr:hover{
                            color: #ff782f;
                        }
                        .thead{
                            .tabTr{
                                background: #f4f4f4;
                            }
                            .tabTr:hover{
                                color: black;
                            }
                        }
                        .tFooter{
                            text-align: center;
                            color: #ff782f;
                            // box-shadow: 0 -5px 20px #fff9f9;
                            padding: .625rem;
                        }
                    }
                }
            }
        }
    }
}